<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-form :inline="true" size="small">
      <el-form-item label="">
        <el-input v-model="searchObj.roleName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getRoleList()"
          >搜索</el-button
        >
        <el-button @click="resetSearch">清空</el-button>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      size="small"
      style="margin-right: 10px"
      @click="addRole"
      >添加</el-button
    >
    <el-popconfirm
      confirm-button-text="确定"
      cancel-button-text="取消"
      icon="el-icon-info"
      icon-color="red"
      title="确定删除所有选中的角色吗?"
       @confirm='removeAllChecked'
    >
      <el-button
        size="small"
        type="danger"
        slot="reference"
        :disabled="removeRoleIds.length === 0"
        >批量删除</el-button
      >
    </el-popconfirm>
    <div style="width: 1000px">
      <el-table
        border
        stripe
        style="margin: 20px 0"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        :data="roleList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column label="角色名">
          <template slot-scope="{ row, $index }">
            <span v-show="!row.flag">{{ row.roleName }}</span>
            <div v-show="row.flag">
              <el-input v-model="rowRolename[$index]" size="mini"></el-input>
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-refresh"
                style="margin-top: 5px"
                @click="cancle(row)"
                >取消</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row, $index }">
            <el-button
              type="info"
              size="mini"
              icon="el-icon-info"
              title="分配权限"
              @click='toAuth(row)'
            ></el-button>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-check"
              title="确定"
              @click="sendUpdateRole(row, $index)"
            ></el-button>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-edit"
              title="修改角色"
              @click="updateRole(row, $index)"
            ></el-button>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              :title="`确定要删除角色${row.roleName}吗？`"
              @confirm="removeRole(row.id)"
              style="margin-left: 10px"
            >
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                title="删除角色"
                slot="reference"
              ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="getRoleList"
        :current-page="currentPage"
        :page-sizes="[3, 5, 7, 9]"
        :page-size="pageSize"
        layout=" prev, pager, next, jumper,->, sizes,total"
        :total="total"
      />
    </div>
    <el-dialog title="添加角色" :visible.sync="dialogVisible" width="25%">
      <el-form :inline="false" size="normal">
        <el-form-item label="请输入新角色名称">
          <el-input v-model="addRoleData.roleName"></el-input>
        </el-form-item>
        <el-form-item label-width="70%">
          <el-button size="mini" @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="sendAddRole"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: "Role",
  data() {
    return {
      loading: false,
      currentPage: 1,
      pageSize: 5,
      total: 0,
      roleList: [],
      searchObj: {
        roleName: "",
      },
      dialogVisible: false,
      addRoleData: {},
      rowRolename: [],
      removeRoleIds: [],
    };
  },
  mounted() {
    this.getRoleList();
  },
  methods: {
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getRoleList();
    },
    //获取role列表请求
    async getRoleList(page = 1) {
      this.loading = true;
      this.currentPage = page;
      const { pageSize, currentPage, searchObj } = this;
      let res = await this.$API.role.getPageList(
        currentPage,
        pageSize,
        searchObj
      );
      this.roleList = res.data.items.map((item) => {
        item.flag = false;
        return item;
      });
      this.total = res.data.total;
      this.loading = false;
    },
    //清空搜索按钮回调
    resetSearch() {
      this.searchObj = {};
      this.getRoleList();
    },
    //添加按钮回调
    addRole() {
      this.dialogVisible = true;
      this.addRoleData = {};
    },
    //添加角色回调
    async sendAddRole() {
      const { addRoleData } = this;
      try {
        await this.$API.role.save(addRoleData);
        this.$message.success("添加成功");
        this.getRoleList();
        this.dialogVisible = false;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    //修改当前角色
    updateRole(role, index) {
      role.flag = true;
      this.rowRolename[index] = role.roleName;
    },
    //切换场景后取消按钮
    cancle(role) {
      role.flag = false;
      this.$message.warning("取消修改");
    },
    //确定修改按钮
    async sendUpdateRole(role, index) {
      role.roleName = this.rowRolename[index];
      try {
        await this.$API.role.updateById(role);
        this.getRoleList(this.currentPage);
        this.$message.success("修改成功");
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    //删除角色按钮回调
    async removeRole(id) {
      try {
        await this.$API.role.removeById(id);
        this.$message.success("删除成功");
        this.getRoleList(
          this.roleList.length ? this.currentPage : this.currentPage - 1
        );
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    //复选框回调
    handleSelectionChange(role) {
      this.removeRoleIds = role.map((item) => item.id);
    },
    //批量删除按钮回调
    async removeAllChecked(){
      try {
        await this.$API.role.removeRoles(this.removeRoleIds);
        this.$message.success("删除成功");
        this.getRoleList(this.roleList.length?this.currentPage:this.currentPage-1);
      } catch (error) {
        this.$message.error(error.message);
      }

    },
    //跳转去auth页面
    toAuth(row){
      this.$router.push({path:`/acl/role/auth/${row.id}?roleName=${row.roleName}`})
    }
  },
};
</script>

<style lang="less" scoped>
</style>